window.onload = function(){

    //购物车显隐
    (function(){
        var oHeader = document.getElementById('header');
        var oDiv = getByClass(oHeader, 'shop_show')[0];
        var oShop = getByClass(oHeader, 'shop')[0];

        oShop.onmouseover=function(){
            oDiv.style.height = 0;
            oDiv.style.display='block';
            startMove(oDiv, 0.3, {height: 98}); 
        };
        oShop.onmouseout=function(){
            startMove(oDiv, 0.3, {height: 0}); 
        };
        
    })();


    // 搜索框得失焦点
    (function(){
        var oNav = document.getElementById('nav')
        var oTxt = getByClass(oNav, 'txt')[0];
        var oBtn = getByClass(oNav, 'btn')[0];
        var oTxt1 = getByClass(oNav, 'txt_1')[0];
        var oTxt2 = getByClass(oNav, 'txt_2')[0];
        var oUl = getByClass(oNav, 'key_words')[0];

        // oUl.style.height = 0;
        // oUl.style.display= 'block';

        oTxt.onfocus = function(){
            oUl.style.display = 'block';
            oTxt1.style.display = oTxt2.style.display = 'none';
            oTxt.style.borderColor = oBtn.style.borderColor = '#FF6700';
        };
        oTxt.onblur = function(){
            oUl.style.display = 'none';
            oTxt1.style.display = oTxt2.style.display = 'block';
            oTxt.style.borderColor = oBtn.style.borderColor = '#E0E0E0';
        };
    })();


    //轮播图
    (function(){
        var oParent = document.getElementById('content_t');
        var oSwitch = getByClass(oParent, 'switch')[0];
        var aImg = getByClass(oParent, 's_img')[0].getElementsByTagName('a');
        var aBtn = getByClass(oParent, 'tab_btn')[0].getElementsByTagName('span');
        var oPrev = getByClass(oParent, 'prev')[0];
        var oNext = getByClass(oParent, 'next')[0];
        var iNow = 0;
        var timer = null;

        for( var i=0; i<aBtn.length; i++)
        {
            aImg[i].style.display = 'none';
            aImg[0].style.display = 'block';
            aBtn[i].className = '';
            aBtn[0].className = 'active';

            aBtn[i].index = i;
            aBtn[i].onclick = function(){
                iNow = this.index;
                // var iNow = this.index;   会在造成错误

                doMove(0);

            }
            
        }

        oPrev.onclick = function(){
            doMove(-1);
        };
        oNext.onclick = function(){
            doMove(1);
        };

        function doMove( num ) {
            iNow += num;
            if ( iNow > aImg.length-1 ) {
                iNow = 0;
            }
            if ( iNow < 0 ) {
                iNow = aImg.length-1;
            }
            for( var i=0; i<aBtn.length; i++)
            {
                aImg[i].style.display = 'none';
                aImg[iNow].style.display = 'block';
                aBtn[i].className = '';
                aBtn[iNow].className = 'active';
            }
        }

        timer = setInterval(function(){
                    doMove(1);
                }, 3000);

        oSwitch.onmouseover = function(){
            clearInterval(timer);
        };
        oSwitch.onmouseout = function(){
            timer = setInterval(function(){
                    doMove(1);
                    }, 3000);
        };
    })();


    //选项卡
    (function(){
        var oParent = document.getElementById('content_b');
        var oCol = getByClass(oParent, 'collocation')[0];
        var oParts = getByClass(oParent, 'parts')[0];
        var oGround = getByClass(oParent, 'ground')[0];

        doTab(oCol);
        doTab(oParts);
        doTab(oGround);

        function doTab(obj){
            var aLi = getByClass(obj, 'tab_lab')[0].getElementsByTagName('li');
            var oUl = getByClass(obj, 'list_5');

            for(var i=0; i<aLi.length; i++)
            {
                function tabChange(num){
                    for(var i=0; i<aLi.length; i++)
                    {
                        aLi[i].className = '';
                        oUl[i].style.display = 'none';
                    }

                    aLi[num].className = 'active';
                    oUl[num].style.display = 'block';
                }
                
                tabChange(0);

                aLi[i].index = i;
                aLi[i].onmouseover = function(){
                    tabChange(this.index);
                };
            }

        }
    })();



    //li上升
    (function(){
        var oParent = document.getElementById('content_b');
        var aWrap = getByClass(oParent, 'wrap');

        for( var i=0; i<aWrap.length; i++)
        {
            var aLi = aWrap[i].getElementsByTagName('ul')[0].getElementsByTagName('li');

            floatUp(aLi);
        }

        var aImgs = getByClass(oParent, 'side_img');
        for( var i=0; i<aImgs.length; i++)
        {
            var aImg = aImgs[i].getElementsByTagName('img');

            floatUp(aImg);
        }
        
        function floatUp(obj){
            for( var i=0; i<obj.length; i++)
            {
                removeClass(obj[i], 'active');
                obj[i].onmouseover = function(){
                    addClass(this, 'active');
                };
                obj[i].onmouseout = function(){
                    removeClass(this, 'active');
                };
            }
        }
        
    })();



    //小轮播图
    (function(){
        var oParent = document.getElementById('content_b');
        var oP = getByClass(oParent, 'con')[0];
        var oBook = getByClass(oP, 'book')[0];
        var oMIUI = getByClass(oP, 'MIUI_topic')[0];
        var oGame = getByClass(oP, 'games')[0];
        var oApp = getByClass(oP, 'app')[0];

        Switch(oBook);
        Switch(oMIUI);
        Switch(oGame);
        Switch(oApp);

        function Switch(obj){
            
            var oOl = obj.getElementsByTagName('ol')[0];
            var aSpan = obj.getElementsByTagName('span');
            var oPrev = getByClass(obj, 'prev')[0];
            var oNext = getByClass(obj, 'next')[0];
            var iWidth = oOl.getElementsByTagName('li')[0].offsetWidth;
            var iNow = 0;

            // alert(iWidth);
            // alert(oPrev);

            oOl.style.width = iWidth*aSpan.length + 'px';
        
            obj.onmouseover = function(){
                addClass(oPrev, 'active');
                addClass(oNext, 'active');
                this.className = 'active';
            };
            obj.onmouseout = function(){
                removeClass(oPrev, 'active');
                removeClass(oNext, 'active');
                this.className = '';
            };

            hLight(oPrev);
            hLight(oNext);
            function hLight(oBtn){
                oBtn.onmouseover = function(){
                    addClass(oBtn, 'hover');
                };
                oBtn.onmouseout = function(){
                    removeClass(oBtn, 'hover');
                };
            }
            

            for( var i=0; i<aSpan.length; i++)
            {
                aSpan[i].index = i;
                aSpan[i].onclick = function(){
                    iNow = this.index;
                    doMove(0);
                }
            }

            oPrev.onclick = function(){
                doMove(-1);
            };
            oNext.onclick = function(){
                doMove(1);
            };

            function doMove( num ) {
                iNow += num;
                if ( iNow > aSpan.length-1 ) {
                    iNow = 0;
                }
                if ( iNow < 0 ) {
                    iNow = aSpan.length-1;
                }
                for( var i=0; i<aSpan.length; i++)
                {
                    startMove(oOl, 0.2, { left: -iNow*iWidth});
                    aSpan[i].className = '';
                    aSpan[iNow].className = 'active';
                }
            }
        }

    })();


    // 摆动切换 ?
    (function(){
        var oTop = document.getElementById('content_t');
        var oBottom = document.getElementById('content_b');
        var oStars = getByClass(oTop, 'stars')[0];
        var oRecommend = getByClass(oBottom, 'recommend')[0];

        // alert(oStars);
        doSwing(oStars);
        doSwing(oRecommend);

        function doSwing(obj){
            var oUl = obj.getElementsByTagName('ul')[0];
            var aEm = getByClass(obj, 'p_title')[0].getElementsByTagName('em');
            var timer=null;

            oUl.style.left==0;
            for( var i=0; i<aEm.length; i++)
            {
                aEm[i].className = '';
                aEm[1].className = 'active';

                aEm[i].onclick = function(){
                    if(this.className = 'active')
                    {
                        doMove();
                    }
                };
            }
            
            timer = setInterval(doMove, 1000);
            overOut(oUl);
            overOut(aEm[0]);
            overOut(aEm[1]);


            function overOut(object){
                object.onmouseover = function(){
                    clearInterval(timer);
                };
                object.onmouseout = function(){
                    timer = setInterval(doMove, 1000);
                };
            }

            function doMove(){
                if(oUl.style.left==0)
                {
                    startMove(oUl, 0.15, {left: -1226});
                    aEm[0].className = 'active';
                    aEm[1].className = '';
                }
                else
                {
                    startMove(oUl, 0.15, {left: 0});
                    aEm[1].className = 'active';
                    aEm[0].className = '';
                }
            }
        }
        
    })();



    //轮播图区域显隐导航
    (function(){
        var oParent = document.getElementById('content_t');
        var aLi = getByClass(oParent, 'category-item');
        
        for( var i=0; i<aLi.length; i++)
        {
            aLi[i].onmouseover = function(){
                getByClass(this, 'children')[0].style.display = 'block';
            };
            aLi[i].onmouseout = function(){
                getByClass(this, 'children')[0].style.display = 'none';
            };    
        }
        

    })();



    //nav区域导航菜带显隐
    (function(){
        var jsonData1 = { "src": ['mi4c!160x110.jpg', 'mi4!160x110.jpg', 'minote!160x110.jpg', 'minotepro!160x110.jpg'],
                         "title": ['小米手机4c', '小米手机4', '小米Note 标准版', '小米Note 顶配版'],
                         "price": ['1299元起', '1299元起', '1799元起', '2499元起']
                        }

        var jsonData2 = { "src": ['hongmi2a!160x110.jpg', 'hongmi2!160x110.jpg', 'hongmi3!160x110.jpg', 'note!160x110.jpg', 'note2!160x110.jpg', 'note3!160x110.jpg'],
                         "title": ['红米手机2A 高配版', '红米手机2', '红米手机3', '红米Note 电信版','红米Note 2' ,'红米Note 3'],
                         "price": ['特价499元', '599元起', '699元起', '699元起', '799元起', '899元起']
                        }

        var oParent = document.getElementById('nav');
        var oMenu = document.getElementById('nav_menu');
        var oHidden = oMenu.getElementsByTagName('ul')[0];
        var str = '';
        var oShow = getByClass(oParent, 'fold');

        var arrD = [jsonData1, jsonData2];
        // alert(arrD[0]['title']);
        
        for( var i=0; i<oShow.length; i++)
        {
            oShow[i].index = i;
            oShow[i].onmouseover = function(){
                oMenu.style.display = 'block';
                writeStr(this.index);
            };
            oMenu.onmouseover = function(){
                oMenu.style.display = 'block';
            };
            oShow[i].onmouseout = oMenu.onmouseout = function(){
                oMenu.style.display = 'none';
            };

            function writeStr(j){
                for( var i=0; i<arrD[j]['title'].length; i++)
                {
                    str += '<li><a href="" class="img"><img src="img/'+arrD[j]['src'][i]+'" alt=""></a><a href="" class="title">'+arrD[j]['title'][i]+'</a><p>'+arrD[j]['price'][i]+'</p></li>';
                }
                oHidden.innerHTML = str;
                str = '';
            }
        }
    })();





    //高亮浮起
    (function(){
        var oParent = document.getElementById('content_b');
        var aLi = getByClass(oParent, 'h_light');
        var arrData = [
                        ['比我以前买的小米充电宝砖头好太多了！放在包里不占位置...', '来自于 龚毅祥 的评价'],
                        ['3个usb插口正好给手机和pad充电，隐藏式白色指示...', ' 来自于 prinoac 的评价 '],
                        ['音质太棒了。每天跑步时候带着它，带着音乐，真舒服。身...', ' 来自于 248415831 的评价 '],
                        ['', ''],
                        ['', ''],
                        ['这小钢炮给我的感觉太震撼了，完全超出了我的意料之外，...', ' 来自于 dp588 的评价 '],

                        ['为了出远门买的，容量超大，比想象中要小的多，还能双口...', ' 来自于 riku1990 的评价 '],
                        ['', ''],
                      ];

        var str = '';
        // alert(arrData[1][1]);
        for(var i=0; i<aLi.length; i++)
        {
            aLi[i].index = i;
            aLi[i].onmouseenter = function(){
                str += '<a class="highlight"><em>'+arrData[this.index][0]+'</em><span>'+arrData[this.index][1]+'</span></a>';
                str += this.innerHTML;
                this.innerHTML = str;
                str = '';

                // getByClass(this, 'highlight')[0].style.height = 75+'px';
                startMove(getByClass(this, 'highlight')[0], 0.4, {height: 75}); 
                // return false;  
            };

            aLi[i].onmouseleave = function(){
                startMove(getByClass(this, 'highlight')[0], 0.4, {height: 0});
                // return false;
                // getByClass(this, 'highlight')[0].style.height = 0;
            }
        }
    })();





    // 视频区域移入高亮效果
    (function(){

        var oParent = document.getElementById('content_b');
        var oViedo = getByClass(oParent, 'viedo')[0];
        var aLi = oViedo.getElementsByTagName('li');
        var aBtn = getByClass(oViedo, 'viedo_btn');

        for( var i=0; i<aLi.length; i++)
        {
            removeClass(aBtn[i], 'active');

            aLi[i].index = i;
            aLi[i].onmouseover = function(){
                addClass(aBtn[this.index], 'active');
                this.className = 'active';
            };
            aLi[i].onmouseout= function(){
                removeClass(aBtn[this.index], 'active');
                this.className = '';
            };
        }
    })();


};